<template>
  <div class="search">
    <Card>
      <Row>
        <Form
          ref="editForm"
          :model="editForm"
          :rules="rules"
          style="width: 100%"
          :label-width="120"
        >
          <FormItem label="资讯内容" prop="details">
            <div class="news-content">
              <div class="news-title">{{ editForm.title }}</div>
              <div class="news-second">
                <div>{{ editForm.origin }}</div>
                <div>{{ editForm.createTime }}</div>
              </div>
              <div
                class="news-body"
                v-if="editForm.resourceType == 1"
                v-html="editForm.details"
              ></div>
              <div class="news-body" v-if="editForm.resourceType == 2">
                <video
                  autoplay
                  controls
                  :src="editForm.source"
                  :poster="editForm.coverPath"
                  controlslist="nodownload"
                />
              </div>
              <div>
                <div v-for="(i, k) in labelList" :key="k" class="type-item">
                  {{ i }}
                </div>
              </div>
            </div>
          </FormItem>
          <FormItem
            v-if="editForm.createByType == '1004001' && editForm.resourceType == 1"
            label="显示模式"
            prop="displayMode"
          >
            <Select
              v-model="editForm.displayMode"
              placeholder="请选择显示模式"
              clearable
              style="width: 40%"
            >
              <Option v-for="(i, k) in modeList" :key="k" :value="i.value">{{
                i.label
              }}</Option>
            </Select>
            <span style="margin: 0 5px 0 150px">推荐显示</span
            ><i-switch
              v-model="editForm.recommendSort"
              :true-value="1"
              :false-value="-1"
              true-color="#5FB878"
            />
          </FormItem>
          <FormItem
            v-if="
              editForm.createByType == '1004001' &&
              editForm.resourceType == 1 &&
              editForm.displayMode != 3
            "
            prop="coverPath"
          >
            <img v-for="(i, k) in imgList" :key="k" :src="i" class="form-img" />
            <Upload
              v-if="uploadSHow"
              type="drag"
              ref="upload"
              multiple
              action
              :max-size="2 * 1024"
              :show-upload-list="false"
              :before-upload="beforeUpload"
              accept=".jpg, .jpeg, .png"
              :format="['jpg', 'jpeg', 'png']"
              style="width: max-content; display: inline-block"
            >
              <img v-if="editForm.siteCover" :src="editForm.siteCover" height="150" />
              <div v-else style="width: 150px; height: 150px; line-height: 150px">
                <Icon type="md-add" size="20" />
              </div>
            </Upload>
            <span v-if="editForm.displayMode == 1" style="margin-left: 20px; color: #aaa"
              >上传jpg/png格式图片，不超过2MB，支持上传1张</span
            >
            <span v-if="editForm.displayMode == 2" style="margin-left: 20px; color: #aaa"
              >上传jpg/png格式图片，每张图片不超过2MB，支持上传3张</span
            >
          </FormItem>
          <div>
            <Button type="text" @click="toback">返回</Button>
            <Button type="primary" v-if="editForm.id" @click="submitForm">发布</Button>
          </div>
        </Form>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_News from "@/api/news.js";
import { videoUrl } from "@/api/common.js";

export default {
  name: "news-release",
  data() {
    return {
      editForm: {}, // 表单
      imgList: [], //图片
      labelList: [], //关键字标签
      modeList: [
        //显示模式
        { value: 1, label: "大图模式" },
        // { value: 2, label: "小图模式" },
        { value: 3, label: "普通模式" },
      ],
      rules: {
        // 验证规则
        coverPath: [{ required: true, message: "请上传资讯封面" }],
        displayMode: [{ required: true, message: "请选择显示模式" }],
      },
    };
  },
  computed: {
    uploadSHow: {
      get() {
        let res = true;
        if (this.editForm.displayMode == 1) {
          res = this.imgList.length == 0;
        }
        if (this.editForm.displayMode == 2) {
          res = this.imgList.length < 3;
        }
        return res;
      },
    },
  },
  mounted() {
    let id = this.$route.query.id;
    this.init(id);
  },
  methods: {
    // 返回上级
    toback() {
      this.$store.commit("removeTag", "news-release");
      this.$router.go(-1);
    },
    // 初始化表单
    init(id = null) {
      let form = {
        id: null,
        title: null, //资讯标题
        recommendSort: -1, //推荐显示 -1不推荐，1推荐
        type: null, //资讯类型
        sourceType: null, //资讯来源类型
        origin: null, //资讯来源
        keyword: null, //关键字
        displayMode: 1, //显示模式 1大图，2小图，3普通
        resourceType: 1, //上传形式 1图文，2视频
        details: null, //资讯内容
        content: null, // 临时资讯内容
        source: null, // 临时播放地址
        coverPath: "", // 资讯封面
        status: null, //状态
        createByType: "1004002", //创建人类型1004001专家，1004002平台
      };
      if (id) {
        API_News.getNewsDetail(id).then((res) => {
          if (res.success) {
            this.editForm = Object.assign(form, res.result);
            if (this.editForm.keyword) {
              this.labelList = this.editForm.keyword.split(",");
            }
            if (this.editForm.resourceType == 2) {
              this.editForm.content = this.editForm.details;
              this.editForm.source = videoUrl(this.editForm.details);
            }
            if (this.editForm.resourceType == 1 && this.editForm.coverPath) {
              this.imgList = this.editForm.coverPath.split(",");
            }
          }
        });
      } else {
        this.editForm = Object.assign({}, form);
      }
    },
    // 自定义上传
    beforeUpload(file) {
      let typeList = [".jpg", ".jpeg", ".png"];
      if (!typeList.some((i) => file.name.lastIndexOf(i) != -1)) {
        this.$Message.warning("请检查上传文件格式");
        return;
      }
      if (file.size / 1024 > 2 * 1024) {
        this.$Message.warning("图片大小不能超过2MB");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      API_News.postUpload(formData).then((res) => {
        if (res.success) {
          if (this.editForm.displayMode == 1) {
            if (this.imgList.length == 0) {
              this.imgList.push(res.result);
              this.editForm.coverPath = this.imgList.join(",");
            }
          }
          if (this.editForm.displayMode == 2) {
            if (this.imgList.length < 3) {
              this.imgList.push(res.result);
              this.editForm.coverPath = this.imgList.join(",");
            }
          }
        }
      });
      return false;
    },
    //提交
    submitForm() {
      if (this.editForm.createByType == "1004002") {
        // 平台直接发布
        API_News.postNewsRlease({ informationId: this.editForm.id }).then((res) => {
          if (res.success) {
            this.$Message.success("发布成功");
            this.toback();
          }
        });
      } else {
        // 专家发布-修改资讯
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.editForm.status = 4;
            let data = Object.assign({}, this.editForm);
            if (data.resourceType == 2) {
              data.details = data.content;
            }
            delete data.content;
            delete data.source;
            API_News.postNewsUpdate(data).then((res) => {
              if (res.success) {
                this.$Message.success("发布成功");
                this.toback();
              }
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.news-content {
  width: 90%;
  max-height: 700px;
  min-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #d8d8d8;
  .news-title {
    color: #000;
    margin: 20px 0;
    text-align: center;
    font-size: 28px;
  }
  .news-second {
    display: flex;
    justify-content: center;
    > div {
      margin: 0 40px;
    }
  }
  .news-body {
    font-size: 16px;
    width: auto;
    word-break: break-all;
    padding: 20px 50px;
    min-height: 550px;
    text-align: left;
    position: relative;
    video {
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      top: 50%;
      height: 500px;
      background-color: #000;
    }
  }
  .type-item {
    user-select: none;
    display: inline-block;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 2px;
    margin: 0 5px 10px 5px;
    background-color: #eeeeee;
  }
}
.form-img {
  width: 150px;
  height: 150px;
  margin-right: 5px;
  border-radius: 4px;
}
</style>
